<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
        </f:facet>

        <f:facet name="middle">
            <h:outputStylesheet name="bootstrap/css/bootstrap.css" />

            <h:outputStylesheet name="css/datepicker.css" />
            <h:outputStylesheet name="css/dashboard.css" />

            <h:outputScript name="js/jquery-1.11.1.js" /> 
            <h:outputScript name="bootstrap/js/bootstrap.js" />
            <h:outputScript name="js/bootstrap-datepicker.js" /> 
        </f:facet>
        <f:facet name="last">
            <h:outputStylesheet name="css/font-awesome.css" />
        </f:facet>
        <title>Index</title>
    </h:head>

    <h:body>
        <div  class="row">
            <ui:insert name="top">
                <ui:include src="template/header.xhtml" />
                <ui:include src="template/slide-show.xhtml" />  
            </ui:insert>
        </div>
        <div class="row">
            <div class="col-sm-9">
                <h:form id="form" prependId="false">
                    <!--The sortable datatable-->
                    <h:dataTable value="#{paginationBean.postList}" var="cd" rendered="#{paginationBean.postList ne null}">
                        <h:column>
                            <f:facet name="header">
                                CD ID
                            </f:facet>
                            <h:outputText value="#{cd.postId}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                Title
                            </f:facet>
                            <h:outputText value="#{cd.title}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                Interpret
                            </f:facet>
                            <h:outputText value="#{cd.category.categoryName}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                Jahr
                            </f:facet>
                            <h:outputText value="#{cd.createDate}" />
                        </h:column>
                    </h:dataTable>

                    <!--The paging buttons-->
                    <h:commandButton value="first" action="#{paginationBean.pageFirst}"
                                     disabled="#{paginationBean.firstRow == 0}" />
                    <h:commandButton value="prev" action="#{paginationBean.pagePrevious}"
                                     disabled="#{paginationBean.firstRow == 0}" />
                    <h:commandButton value="next" action="#{paginationBean.pageNext}"
                                     disabled="#{paginationBean.firstRow + paginationBean.rowsPerPage &gt;= paginationBean.totalRows}" />
                    <h:commandButton value="last" action="#{paginationBean.pageLast}"
                                     disabled="#{paginationBean.firstRow + myBean.rowsPerPage &gt;= paginationBean.totalRows}" />
                    <h:outputText value="Page #{paginationBean.currentPage} / #{paginationBean.totalPages}" />
                    <br />

                    <!--The paging links-->
                    <ui:repeat value="#{paginationBean.pages}" var="page">
                        <h:commandLink value="#{page}" actionListener="#{paginationBean.page}"
                                       rendered="#{page != paginationBean.currentPage}" />
                        <h:outputText value="&lt;b&gt;#{page}&lt;/b&gt;" escape="false"
                                      rendered="#{page == paginationBean.currentPage}" />
                    </ui:repeat>
                    <br />

                    <!-- Set rows per page -->
                    <h:outputLabel for="rowsPerPage" value="Rows per page" />
                    <h:inputText id="rowsPerPage" value="#{paginationBean.rowsPerPage}" size="3" maxlength="3" />
                    <h:commandButton value="Set" action="#{paginationBean.pageFirst}" />
                    <h:message for="rowsPerPage" errorStyle="color: red;" />
                </h:form>
            </div>
            <div class="col-sm-3 col-md-3">
                <ui:include src="template/right-content.xhtml" />
            </div>
        </div>

    </h:body>

</html>
